<template>
  <div class="songItem" @click="play(item)">
    <div class="slott"><slot></slot></div>
    <div class="left" >
      <template v-if="item.song">
        <h3>{{item.name}}</h3>
      </template>
      <template v-if="item.artists">
        <h3>{{item.name}}</h3>  {{item.alias[0]}}
      </template>

      <p>
        <i></i>
        <template v-if="item.song">
          {{item.song.artists[0].name}}
        </template>
        <template v-if="item.artists">
          {{item.artists[0].name}}
        </template>
        - {{item.name}}
      </p>
    </div>
    <!-- <i v-show="isPlay"
    class="iconfont"
    :class="isPlay ? 'playel' : 'player'"
    ></i> -->
    <i
        class="iconfont"
        :class="isPlay ? 'player' : 'playel'"
    ></i>
  </div>
</template>
<script>
export default {
  data(){
    return {
      isPlay:false
    }
  },
  name: "SongItem",
  props:['item'],
  methods:{
    play(item){
      // this.$emit('play',item.id)//组件传值的方式 触发父组件的play 并传递音乐ID
      //换一种方式 把播放音乐相关的数据存储  在Vue实例里面
      //在子组件通过 this.$root.musicStore 访问Vue实例里面的数据
      // console.log(this.$root.musicStore);
      // this.isPlay=true
      this.$root.musicStore.musicID=item.id;
      this.$root.musicStore.currentMusic=item;
      console.log(item);
      // this.$root.musicStore.musicList.unshift(item);//把当前歌曲放在播放列表开头  末尾是push
      let newArr=this.$root.musicStore.musicList
      let find=false;
      for(let n of newArr){
        if(n.id==item.id){
          find=true;
        }
      }
      if(!find)  this.$root.musicStore.musicList.push(item);//当前音乐在播放列表里不存在加入列表
      //把当前歌曲列表全部加入播放歌单列表
      this.$emit('add-list')

    },
  }
}

</script>
<style lang="less" scoped>
.songItem{
  display: flex;
  align-items:center;
  border-bottom: 1px solid #ccc;
  padding:6px 0px;
  padding-right:10px;
  .slott{
    text-align: center;
    width: 40px;
    font-size: 17px;
    color: #999;
  }
  .left{
    flex:1;
    h3{
      color: #333;
      display: inline-block;
      span{
        display: inline-block;
        color: #aaa;
      }
    }

    p{
      color: #aaa;
      font-size: 13px;
      padding-top: 5px;
      i{
        background:url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=) no-repeat;
        background-size: 166px 97px;
        display:inline-block;
        width: 12px;
        height: 8px;
        margin-right: 3px;
      }
    }
  }
}

.player::after{
  content: "\e60a";
  font-size: 28px;
  font-style: normal;
  color: #ccc;
}
.playel::before{
  content: "\e609";
  font-size: 28px;
  font-style: normal;
  color: rgb(150, 142, 142);
}
</style>